<template>
  <div id="">
    <headerbox :headerTitle="headerTitle" :hasBack='true' :headerRightTxt="'发布'" @headerRightEvent="publishEvent"></headerbox>
    <ul class="formList">
      <li>
        <span>主题</span>
        <input type="text" name="" v-model="orderJson.describe_" placeholder="请输入需求主题">
      </li>
      <li @click="classify">
        <span>选择项目</span>
        <input type="text" name="" v-model="classifyValue.classifyName" readonly placeholder="请选择项目">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li @click="sportsLevClick">
        <span>选择等级</span>
        <input type="text" name="" v-model="sportsLevValue.sportsLevName" readonly placeholder="请选择等级">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li>
        <span>金额</span>
        <input type="text" name="" v-model="orderJson.unitPrice" placeholder="请输入金额">
      </li>
      <li @click="setStartTime">
        <span>开始时间</span>
        <input type="text" name="" v-model="orderJson.startTime" readonly placeholder="请选择开始时间">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li @click="setEndTime">
        <span>结束时间</span>
        <input type="text" name="" v-model="orderJson.endTime" readonly placeholder="请选择结束时间">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
      <li @click="addressMap">
        <span>约定地址</span>
        <input type="text" name="" v-model="orderJson.agreedAddr" readonly placeholder="请选择约定地址">
        <img src="@/assets/memberImage/arrow_right2.png" alt="" width="10" class="ml10">
      </li>
    </ul>

    <!-- picker -->
    <mt-popup
      v-model="pickerVisible"
      position="bottom" style="width:100%;">
      <mt-picker :slots="slots" :valueKey="valueKey" @change="pickerChange"></mt-picker>
    </mt-popup>

    <mt-datetime-picker
      ref="datepicker"
      type="datetime"
      v-model="pickerValue"
      :startDate="startDate"
      @confirm="dateConfirm">
    </mt-datetime-picker>
  </div>
</template>
<script>
import {getClassifyList,orderPush} from '@/utils/ajaxRequest.js';
import {mapState,mapMutations} from 'vuex';
import {dateChangeTime} from '@/utils/util.js';
export default {
  name: "",
  data: () => ({
    headerTitle:'',
    pickerVisible:false,
    slots:[{
      flex: 1,
      values: [{id:'',name:''}],
      className: 'slot1',
      textAlign: 'center'
    }],
    valueKey:'',
    pickerType:'',
    classifyJson:[],
    classifyValue:{id:'',classifyName:''},    //活动类型--总

    sportsLevValue:{id:'',sportsLevName:''},    //运动水平

    pickerValue:'',

    startDate: new Date(),     //日历picker开始日期
    dateEvent:'',    //选择的日期类型：开始、结束
    orderJson:{
      token:'',
      skillType:'',
      describe_:'',     //需求主题
      proType:'',       //项目类型
      sportsLev:'',     //运动水平
      startTime:'',     //开始时间
      endTime:'',       //结束时间
      unitPrice:'',     //单价、金额
      agreedAddr:'',    //地址
      province:'',
      city:'',
      area:'',
      lng:'',
      lat:'',
    },
  }),
  computed: {
    ...mapState({
      mapValue:state=>state.mapStore.mapVal,
      orderPushData:state=>state.mapStore.orderPushData,
      classifyData:state=>state.mapStore.classifyData,
      sportsLevData:state=>state.mapStore.sportsLevData,
    })
  },
  methods: {
    ...mapMutations(['setOrderPushData','setClassifyData','setSportsLevData']),
    // 发布
    publishEvent(data) {
      let self = this;
      let orderParam = self.orderJson;
      for (var key in orderParam) {
        if (orderParam[key]=='') {
          self.toast(key+'请设置');
          return false;
        }
      }
      console.log(JSON.stringify(orderParam));
      orderPush(orderParam).then(res=>{
        console.log(res);
        if(res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      })
    },
    // picker事件
    pickerChange(picker,values) {
      console.log(values);
      switch (this.pickerType) {
        case '活动类型':
          this.classifyValue = values[0];
          this.orderJson.proType = values[0].id;
          break;
        case '运动水平':
          this.sportsLevValue = values[0];
          this.orderJson.sportsLev = values[0].id;
          break;
        default:

      }
    },
    // 选择活动类型
    classify() {
      this.slots[0].values = this.classifyJson;
      this.pickerVisible = true;
      this.valueKey = 'classifyName';
      this.pickerType = '活动类型'
    },
    // 运动水平
    sportsLevClick() {
      this.slots[0].values = [{id:'0',sportsLevName:'初级'},{id:'1',sportsLevName:'中级'},{id:'1',sportsLevName:'高级'}];
      this.pickerVisible = true;
      this.valueKey = 'sportsLevName';
      this.pickerType = '运动水平'
    },
    // 跳转地图查询地址信息
    addressMap() {
      this.$router.push({name:'baiduMap'});
      this.setOrderPushData(this.orderJson);    //储存编辑过的数据表
      this.setClassifyData(this.classifyValue);    //储存编辑过的数据表
      this.setSportsLevData(this.sportsLevValue);    //储存编辑过的数据表
    },
    // 设置开始时间
    setStartTime() {
      this.$refs.datepicker.open();
      this.dateEvent = '开始时间';
    },
    // 设置结束时间
    setEndTime() {
      this.$refs.datepicker.open();
      this.dateEvent = '结束时间';
    },
    dateConfirm(values) {
      console.log(dateChangeTime(values));
      switch (this.dateEvent) {
        case '开始时间':
          this.orderJson.startTime = dateChangeTime(values);
          break;
        case '结束时间':
          this.orderJson.endTime = dateChangeTime(values);
          break;
        default:

      }
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    self.orderJson.token = xlyd_loginInfo.token;

    let skillType = self.$route.query.skillType;
    console.log(skillType);
    let headerTitle = '';
    switch (skillType) {
      case '0':
        headerTitle = '找陪练';
        break;
      case '1':
        headerTitle = '找圈友';
        break;
      case '2':
        headerTitle = '找教练';
        break;
      default:

    }
    self.orderJson.skillType = skillType;
    this.headerTitle = headerTitle;
    console.log(this.headerTitle);
    // 获取分类
    getClassifyList().then(res=>{
      console.log(res);
      if(res){
        self.classifyJson = res.data.result;
      }
    });
    this.$nextTick(()=>{
      let addrMessage = this.mapValue;
      console.log(this.orderPushData);
      if(this.orderPushData){
        this.orderJson = this.orderPushData;
      }
      if(this.classifyData){
        this.classifyValue = this.classifyData
      }
      if(this.sportsLevData){
        this.sportsLevValue = this.sportsLevData
      }
      if(addrMessage=='') {

      }else{
        this.orderJson.agreedAddr = addrMessage.surroundingPois[0].address+' '+addrMessage.surroundingPois[0].title;    //活动地址
        this.orderJson.province = addrMessage.addressComponents.province;   //省份
        this.orderJson.city = addrMessage.addressComponents.city;       //城市
        this.orderJson.area = addrMessage.addressComponents.district;       //区域
        this.orderJson.lng = addrMessage.point.lng;   //
        this.orderJson.lat = addrMessage.point.lat;   //
      }
    })
  }
}
</script>
<style lang="scss" scoped>
</style>
